<template>
	<!-- 修改遮罩层事件处理 -->
	<view v-if="show" class="popup-mask" @tap.stop="close" :class="{ 'mask-active': show }">
		<!-- 修改弹窗内容事件处理 -->
		<view class="popup-content" :class="{ 'content-active': show }" @tap.stop="close">
			<view class="popup-body">
				<slot></slot>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		watch
	} from 'vue';

	const props = defineProps({
		modelValue: {
			type: Boolean,
			default: false
		},
	});

	const emit = defineEmits(['update:modelValue']);

	const show = ref(false);

	watch(() => props.modelValue, (val) => {
		show.value = val;
	});

	const close = () => {
		show.value = false;
		console.log("debugger")
		emit('update:modelValue', false);
	};
</script>

<style scoped>
	/* 遮罩层动画 */
	.popup-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(245, 245, 245, 0.5);
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 999;
		transition: 0.3s ease;
		overflow: hidden;
	}

	.mask-active {
		opacity: 1;
	}

	/* 弹窗容器优化 */
	.popup-content {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%) scale(0.8);
		width: 80%;
		max-width: 200rpx;
		background: #fff;
		border-radius: 16rpx;
		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
		box-shadow: 0 12rpx 48rpx rgba(0, 0, 0, 0.12);
		background-color: #f1b81a;
	}

	.content-active {
		opacity: 1;
		transform: translate(-50%, -50%) scale(1);
	}


	/* 内容区域优化 */
	.popup-body {
		padding: 40rpx;
		font-size: 28rpx;
		max-height: 50vh;
		text-align: center;
		font-weight: 500;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>